<template>
  <div class="terminal-filter-container">
    <el-row :gutter="40">
      <el-form
        :inline="true"
        :model="queryParams"
        size="small"
        class="filter-form-inline"
      >
        <el-row
          :gutter="40"
          style="margin-left: 20px; margin-right: 0px"
        >
          <el-col :span="5">
            <el-form-item
              label="状态"
              style="width: 100%"
            >
              <el-select
                v-model="queryParams.finishStatus"
                clearable
                style="width: 100%"
                placeholder="请选择终端状态"
                @change="handleSearch"
              >
                <el-option
                  v-for="item in qualificationStatusData.filter(p => p.value!=='3')"
                  :key="item.id"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item
              label="终端类型"
              style="width: 100%"
            >
              <el-select
                v-model="queryParams.terminalType"
                clearable
                style="width: 100%"
                placeholder="请选择终端类型"
                @change="handleSearch"
              >
                <el-option
                  v-for="item in terminalData.filter(a=>a.value !== 'all')"
                  :key="item.id"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item
              label="终端所在地"
              style="width: 100%"
              @change="handleSearch"
            >
              <el-cascader
                v-model="area"
                :popper-append-to-body="false"
                style="width:100%"
                placeholder="请选择终端所在地区"
                :options="cityList"
                clearable
                :props="{ value:'regionCode',label:'regionName', expandTrigger: 'hover' }"
                @change="handlCity"
              />
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item
              label="关键字"
              style="width: 100%"
            >
              <el-input
                v-model="queryParams.selectStr"
                clearable
                placeholder="输入终端名称、编号"
                @clear="handleSearch"
              />
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item style="width: 100%">
              <el-button
                class="border-btn"
                @click="handlReset"
              >重置
              </el-button>
              <el-button
                type="primary"
                class="main-btn"
                @click="handleSearch"
              >搜索
              </el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-row>
  </div>
  <table-view
    :data="tableData"
    header-cell-class-name="table-header"
    size="medium"
    border
    :cell-style="cellStyle"
    @row-click="aloneClick"
  >
    <el-table-column
      prop="terminalNo"
      :min-width="140"
      label="终端编号"
      header-align="center"
      :show-overflow-tooltip="true"
      fixed="left"
    />

    <el-table-column
      prop="terminalName"
      :min-width="160"
      label="终端名称"
      header-align="center"
      :show-overflow-tooltip="true"
      fixed="left"
    />

    <el-table-column
      prop="terminalType"
      :min-width="120"
      label="终端类型"
      align="center"
      :show-overflow-tooltip="true"
    >
      <template #default="{row}">
        {{ getLabel('app_mode', row.terminalType) }}
      </template>
    </el-table-column>

    <el-table-column
      label="所在地区"
      :min-width="180"
      header-align="center"
      :show-overflow-tooltip="true"
    >
      <template #default="{row}">
        {{ row.provinceName }}/{{ row.cityName }}/{{ row.areaName }}
      </template>
    </el-table-column>

    <el-table-column
      prop="address"
      label="详细地址"
      :min-width="180"
      header-align="center"
      :show-overflow-tooltip="true"
    />
    <!--
    <el-table-column
      prop="saleAreaName"
      label="所属营销区域"
      :min-width="180"
      header-align="center"
      :show-overflow-tooltip="true"
    />
    <el-table-column
      prop="createdAt"
      label="创建时间"
      sortable="custom"
      :min-width="180"
      align="center"
      :show-overflow-tooltip="true"
    >
      <template #default="{row}">
        {{ dateFormat("yyyy-mm-dd HH:MM:SS",row.createdAt) }}
      </template>
    </el-table-column>
    -->
    <el-table-column
      prop="finishStatus"
      :min-width="120"
      label="资质状态"
      align="center"
      :show-overflow-tooltip="true"
      fixed="right"
    >
      <template #default="{row}">
        <div>{{ getLabel('qualification_status', row.finishStatus) }}</div>
      </template>
    </el-table-column>
  </table-view>

  <pagination
    v-model:page="queryParams.page"
    v-model:limit="queryParams.pageSize"
    style="display: flex; justify-content: flex-end"
    :total="total"
    @pagination="handlList"
  />
</template>

<script>
import { defineComponent, inject, onMounted, reactive, toRefs } from 'vue'
import { useRouter } from 'vue-router'
import { crmStore } from '@CRM/store'
import area from '@/utils/area'

export default defineComponent({
  name: 'TerminalList',
  components: {},
  setup() {
    const api = inject('api')
    const router = useRouter()
    // 搜索对象
    var data = reactive({
      queryParams: {
        terminalType: '',
        finishStatus: '',
        provinceCode: [],
        cityCode: [],
        areaCode: [],
        selectStr: '',
        pageSize: 20,
        page: 1,
        createdSort: '',
      },
      area: [],
      tableData: [],
      total: 0,
      terminalData:
        crmStore.getters['dictionary/getDictionary']['app_mode'] || [],
      qualificationStatusData:
        crmStore.getters['dictionary/getDictionary']['qualification_status'] ||
        [],
      cityList: area,
    })

    const handlCity = (val) => {
      if (val && val.length) {
        data.queryParams.provinceCode = [val[0]]
        data.queryParams.cityCode = [val[1]]
        data.queryParams.areaCode = [val[2]]
      } else {
        data.queryParams.provinceCode = []
        data.queryParams.cityCode = []
        data.queryParams.areaCode = []
      }
      handleSearch()
    }

    // 获取列表
    const handlList = () => {
      api.terminal
        .INTERNAL_CONTROL_TERMINAL_LIST(data.queryParams)
        .then((res) => {
          if (res.code === 0) {
            data.tableData = res.data.list || []
            data.total = res.data.total
          }
        })
    }

    // 重置表格
    const handlReset = () => {
      data.queryParams = {
        terminalType: '',
        status: '',
        provinceCode: [],
        cityCode: [],
        areaCode: [],
        selectStr: '',
        pageSize: 20,
        page: 1,
      }
      data.area = []
      handlList()
    }

    // 搜索表格
    const handleSearch = () => {
      data.queryParams.page = 1
      handlList()
    }

    // 单机表格
    const aloneClick = (row, column, event) => {
      if (column.label === '操作') return
      router.push({
        name: 'customerTerminalDetail',
        query: { id: row.id },
      })
    }

    // 鼠标样式
    const cellStyle = () => {
      return 'cursor:pointer;'
    }

    //* *******************
    onMounted(() => {
      handlList()
    })
    //* *******************

    return {
      ...toRefs(data),
      handlReset,
      handleSearch,
      aloneClick,
      cellStyle,
      handlList,
      handlCity,
    }
  },
})
</script>

<style scoped>
/* @import url(); 引入css类 */
</style>
